<!DOCTYPE html>
<html lang="en">
<head>
    <!--#include file="ssi/head.html"-->
    <meta name="keywords" content="图片占位符">
    <meta name="description" content="图片占位符">
    <title>图片占位符</title>
    <!--#include file="ssi/link.html"-->
</head>
<body>
    <!--#include file="ssi/nav.html"-->
    <!--#include file="ssi/top-head.html"-->
    <style>
      .result-img .img-x{
        overflow: hidden;
      }
      .input-group{
        position: relative;
      }
      .color-em{display: inline-block;width: 30px;height: 30px;border: 1px solid #ddd;position: absolute;right: 4px;z-index: 10;border-radius: 8px;top: 2px;}
      .color-bc{
        background-color: #d3d3d3;
      }
      .color-fc{
        background-color: #000;
      }
    </style>
    <section class="container margin-bot-l">
      <h1 class="headline">生成一个占位符图片</h1>
      <form class="form form-horizontal custom-form-1" id="placehold-form">
        
        <div class="input-group margin-bot-l">
          <span class="input-group-addon">图片宽度</span>
          <input type="text" class="form-control" placeholder="非必填，默认100，最大宽度2048，超过最大宽度的默认宽2048" name="w" id="width">
        </div>
        <div class="input-group margin-bot-l">
          <span class="input-group-addon">图片高度</span>
          <input type="text" class="form-control" placeholder="非必填，默认100，最大高度度2048，超过最大高度的默认高2048" name="h" id="height">
        </div>
        <div class="input-group margin-bot-l">
          <span class="input-group-addon">背景色</span>
          <input type="text" class="form-control" autocomplete="off" placeholder="非必填，默认#d3d3d3，请输入一个背景色16进制色值" name="bc" id="bgcolor">
          <em class="color-em color-bc"></em>
        </div>
        <div class="input-group margin-bot-l">
          <span class="input-group-addon">字体颜色</span>
          <input type="text" class="form-control" placeholder="非必填，默认#000，请输入一个字体色16进制色值" name="fc" id="fontcolor" autocomplete="off">
          <em class="color-em color-fc"></em>
        </div>
        <div class="input-group margin-bot-l">
          <span class="input-group-addon">对角线</span>
          <input type="text" class="form-control" placeholder="非必填，默认无对角线, 比背景色略深的对角线请输入1，白色的对角线请输入2，输入其他或者不输入是无对角线" name="line" id="line">
        </div>
        <div class="input-group">
          <span class="input-group-addon">角标</span>
          <input type="text" class="form-control" placeholder="非必填，默认无角标，用于标记占位符序号的角标" name="n" id="num">
        </div>
        <button type="submit" class="btn btn-primary btn-lg single-btn">生成一张占位符图片</button>
      </form>
      <div class="result-img" id="placehold-show">
        <div class="img-x" style="margin-bottom: 15px;"></div>
        <a class="text-x" target="_blank"></a>
      </div>
    </section>

    <section class="container">
      <h1 class="headline">占位图接口参数说明</h1>
      <div class="code-pre">
        <pre><code>// 接口地址
http://api.wubin.work/tool/placehold?w=宽度&h=高度&bc=背景色&fc=字体色&line=对角线&n=角标</code></pre>
      </div>
      
      <table class="table table-bordered table-hover margin-bot-ll">
        <thead>
          <tr>
            <td>参数名称</td>
            <td>类型</td>
            <td>参数说明</td>
            <td>是否必填</td>
            <td>参数默认值</td>
            <td>备注</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>w</td>
            <td>int</td>
            <td>占位符图片宽度</td>
            <td>否</td>
            <td>默认100</td>
            <td>最大宽度为2048，当宽度小于50时隐藏中间的尺寸数值</td>
          </tr>
          <tr>
            <td>h</td>
            <td>int</td>
            <td>占位符图片高度</td>
            <td>否</td>
            <td>默认100</td>
            <td>最大高度度为2048，当高度度小于30时隐藏中间的尺寸数值</td>
          </tr>
          <tr>
            <td>bc</td>
            <td>string</td>
            <td>占位符图片背景色色值(bgcolor)，16进制</td>
            <td>否</td>
            <td>默认灰 #d3d3d3</td>
            <td>无</td>
          </tr>
          <tr>
            <td>fc</td>
            <td>string</td>
            <td>图片中间的尺寸数值的文字颜色(fontcolor)，16进制</td>
            <td>否</td>
            <td>默认黑 #000</td>
            <td>当宽度w&lt;50或者高度h&lt;30时，数值会隐藏</td>
          </tr>
          <tr>
            <td>n</td>
            <td>int</td>
            <td>占位符图片图片编号（左下角角标）</td>
            <td>否</td>
            <td>默认黑 #000</td>
            <td>无</td>
          </tr>
          <tr>
            <td>line</td>
            <td>int</td>
            <td>占位符是否需要对角线</td>
            <td>否</td>
            <td>默认无</td>
            <td>当line=1时，对角线颜色是比背景色稍深一点的颜色；
              <br/>当line=2时，对角线是白色；当为其他值时，对角线不显示</td>
          </tr>
        </tbody>
      </table>

    
      <h1 class="headline">推荐另一个占位符图片接口</h1>
      <blockquote>
        <a href="http://placehold.it/350x350" target="_blank">http://placehold.it/350x350</a>  基本使用：http://placehold.it/350x350/宽度x高度，更多参数如下：
      </blockquote>
      <pre class="margin-bot-l"><code>http://www.placehold.it/width x height/bgcolor/textcolor[&text=hello+world]</code></pre>
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <td>参数</td>
            <td>说明</td>
            <td>备注</td>
            <td>例子</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>width x height</td>
            <td>图片的宽(width)和高(height)</td>
            <td>注意width和height的中间是x,如350x200,同时，height可以缺省，那么就默认height=width，此时生成的是边长为width的正方形图片。</td>
            <td><img src="http://www.placehold.it/100x50/"></td>
          </tr>
          <tr>
            <td>bgcolor</td>
            <td>图片的背景颜色</td>
            <td>值为6位的16进制数字,如ffffff, 7d7d7d等</td>
            <td><img src="http://www.placehold.it/100x50/8B7355/ccccc/"></td>
          </tr>
          <tr>
            <td>textcolor</td>
            <td>文字的颜色</td>
            <td>可以单独缺省，也可以与bgcolor同时缺省，值与bgcolor相同,当只有一个色值时候，默认是bgcolor</td>
            <td><img src="http://www.placehold.it/100x50/4d4d4d"></td>
          </tr>
          <tr>
            <td>&text=hello+world</td>
            <td>将图片中的尺寸替换为&text=后面的文字</td>
            <td>如果想要在图片上添加文字的话，那么就在整个url的最后追加上&text=文字，如果文字中间有空格的话，用+代替；该字段可以缺省，默认显示的是图片的宽和高。</td>
            <td><img src="http://www.placehold.it/100x50/8B7355/sdfasd/&text=loveu"></td>
          </tr>
          <tr>
            <td>.gif, .jpeg, .jpg, .png</td>
            <td>给图片添加各种格式后缀</td>
            <td>这些可以后缀可以添加到 widthxheight, bgcolor或textcolor的任意一个参数后面</td>
            <td>
              <img src="http://www.placehold.it/100x50.png/EF9A9A/ffffff/">
              <img src="http://www.placehold.it/100x50/4DD0E1.gif/ffffff/">
              <img src="http://www.placehold.it/100x50/E64A19/ffffff.jpg/">
            </td>
          </tr>
        </tbody>
      </table>

      
      <div class="alert alert-warning">
        <strong>特别注意</strong>
        <p>* widthxheight必须是第一个参数；</p>
        <p>* bgcolor/textcolor中，两个参数必须连着，中间不能不能插入其他的参数；</p>
        <p>* &text= 如果有的话，必须是最后一个参数。</p>
      </div>
      
      
    </section>

    <!--#include file="ssi/footer.html"-->

  <script>
    // 每一页都需要配置的信息
    var pageInfo = {
      toolLogo: 'img/icon-placehold.png',
      toolName: document.title
    }
  </script>
    <!--#include file="ssi/script.html"-->
    <script src="js/colorpicker.js"></script>
    <script src="js/pages/placehold.js"></script>
</body>
</html>